<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas{
				background-image: url(../day02/pictrure/泰勒4.png);
			}
		</style>
	</head>

	<body><canvas id="mycanvas"  ></canvas>
		<script src="js/numArray.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var canvas = document.getElementById("mycanvas");
			var ctx = canvas.getContext("2d");
			
			var time;
			var balls = [];
			canvas.width = document.documentElement.clientWidth;
			canvas.height =document.documentElement.clientHeight;

			function Ball(x, y, r) {
				this.x = x;
				this.y = y;
				this.r = r;
				var zy = parseInt(Math.random() > 0.5 ? -1 : 1);
				this.vx = parseInt(Math.random() * 15 + 5) * zy;
				this.vy = parseInt(Math.random() * 15 + 5) * zy;
				this.color = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
			}
			getTime();
			setInterval(function() {
				ctx.translate(-1080, 0);
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				upDatetime();
				getTime();
			}, 50);

			function drawNum(arrnum) {
				for (var i = 0; i < arrnum.length; i++) {
					for (var k = 0; k < arrnum[i].length; k++) {
						if (arrnum[i][k] == 1) {
							ctx.beginPath();
							ctx.arc(k * 20 + 10, i * 20 + 10, 10, 0, 2 * Math.PI);
							ctx.fillStyle = "bisque";
							//                          ctx.fillStyle="rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")";
							ctx.fill();
							ctx.closePath();
						}
					}
				}
			}
			//检测时间bianhua
			function upDatetime() {
				var date = new Date();
				var hh = date.getHours();
				var mm = date.getMinutes();
				var ss = date.getSeconds();
				if (ss != time.getSeconds()) {
					//添加爆破小球
					if (parseInt(ss / 10) != parseInt(time.getSeconds() / 10)) {
						addBall(760, 10, 10, parseInt(time.getSeconds() / 10));
					}
					if (ss % 10 != time.getSeconds() % 10) {
						addBall(920, 10, 10, time.getSeconds() % 10);
					}
				}
				if (mm != time.getMinutes()) {
					//添加爆破小球
					if (mm % 10 != time.getMinutes() % 10) {
						addBall(540, 10, 10, time.getMinutes() % 10);
					}
					if (parseInt(mm / 10) != parseInt(time.getMinutes() / 10)) {
						addBall(380, 10, 10, parseInt(time.getMinutes() / 10));
					}
				}
				if (hh != time.getHours()) {
					//添加爆破小球
					if (hh % 10 != time.getHours() % 10) {
						addBall(160, 10, 10, time.getHours() % 10);
					}
					if (parseInt(hh / 10) != parseInt(time.getHours() / 10)) {
						addBall(0, 10, 10, parseInt(time.getHours() / 10));
					}
				}
				drawBalls();
			}
			//更新小球
			function drawBalls() {
				var count = 0;
				for (var i = 0; i < balls.length; i++) {
					ctx.beginPath();
					balls[i].y += balls[i].vy;
					balls[i].x += balls[i].vx;
					balls[i].vy += 9.8;
					if (balls[i].y > canvas.height - balls[i].r) {
						balls[i].y = canvas.height - balls[i].r;
						balls[i].vy = -0.5 * balls[i].vy;
					}
					ctx.arc(balls[i].x, balls[i].y, balls[i].r, 0, 2 * Math.PI);
//					ctx.fillStyle = balls[i].color;
                     ctx.fillStyle ="#00FFFF";
//					ctx.globalAlpha=0.6;
					ctx.fill();
					//判断可视小球的区域
					if (balls[i].x > -balls[i].r && balls[i].x < canvas.width + balls[i].r) {
					balls[count++] = balls[i];
				}
				}
				while(count<balls.length){
					//删除多余的小球
					balls.pop();
				}
				
			}

			function addBall(x, y, r, num) {
				for (var i = 0; i < numbers[num].length; i++) {
					for (var k = 0; k < numbers[num][i].length; k++) {
						if (numbers[num][i][k] == 1) {
							balls.push(new Ball(x + k * 2 * r, y + i * 2 * r, r));
						}
					}
				}
			}

			function getTime() {
				time = new Date();
				var hh = time.getHours();
				var mm = time.getMinutes();
				var ss = time.getSeconds();
				var timearr = [];
				timearr.push(parseInt(hh / 10));
				timearr.push(hh % 10);
				timearr.push(10);
				timearr.push(parseInt(mm / 10));
				timearr.push(mm % 10);
				timearr.push(10);
				timearr.push(parseInt(ss / 10));
				timearr.push(ss % 10);
				drawTime(timearr);
			}

			function drawTime(timearr) {
				ctx.fillStyle = "bisque";
				ctx.fill();
				for (var i = 0; i < timearr.length; i++) {
					drawNum(numbers[timearr[i]]);
					if (i == 2 || i == 5) {
						ctx.translate(80, 0);
					} else if (i == 1 || i == 4) {
						ctx.translate(140, 0);
					} else {
						ctx.translate(160, 0);
					}
				}
			}
		</script>
	</body>

</html>